<template>
	<div>
		<div v-if="message.type == 1" >
			<el-avatar v-if="detail" shape="square" :size="150" :src="JSON.parse(message.content).originUrl" @click="imgViewVisible = true"></el-avatar>
			<el-avatar v-else shape="square" :size="35" :src="JSON.parse(message.content).thumbUrl" @click="imgViewVisible = true"></el-avatar>
		</div>
		<div v-else-if="message.type == 2">
			<el-link type="primary" :href="JSON.parse(message.content).url" :download="JSON.parse(message.content).name" target="_blank">
				{{ JSON.parse(message.content).name }}
			</el-link>
		</div>
		<div v-else-if="message.type == 3">
			<audio style="height: 40px;" controls :src="JSON.parse(message.content).url"></audio>
		</div>
		<div  v-else>
			{{ message.content }}
		</div>
		<el-image-viewer v-if="imgViewVisible" :url-list="[JSON.parse(message.content).originUrl]" 
			@close="imgViewVisible = false"   hide-on-click-modal teleported/>
	</div>
</template>

<script setup lang="ts" name="ImMessageContent">
import { ref} from 'vue'

const props = defineProps({
	message: {
		type: Object,
		required: true
	},
	detail:{
		type: Boolean,
		required: false,
		default: () => false
	}
})

const imgViewVisible = ref(false)

</script>

<style scoped>
 .link {
	color: inherit;
	text-decoration: none;
 }
</style>